<template>
  <div
    ref="container"
    v-loading="loading"
    element-loading-text="加载图片中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    class="container"
  >
    <HeaderContent :check-img="checkImg" />
    <carousel
      ref="carousel"
      v-model="checkImg"
      class="carousel"
      :list="imgList"
      :set-time-start="setTimeStart"
      @dblclickItem="dblclickItem"
    />
    <div class="container_bottom">
      <div ref="container_menu" class="container_menu">
        <div
          v-for="item in menuList"
          :key="item.id"
          class="container_menu_item"
          @click="gotoRouter(item, checkImg)"
          @mouseover="scrollImgStop"
          @mouseout="scrollImg"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- <div class="container_bottom_ladder">
        <div ref="ladder_box" class="container_bottom_ladder_box" />
      </div> -->
    </div>
  </div>
</template>

<script>
import HeaderContent from '@/layout/components/HeaderContent/index.vue';
import Carousel from './components/Carousel';
import { getKeyByMenuId } from '@/api/propertyHomePage/index';
// import { fileFindThumbnail, findHomePageImages } from '@/api/file/index';
import { findHomePageImages } from '@/api/file/index';
import { downFile } from '@/utils/getFiles';
// import {
// getQueryBodyByProduce
// } from '@/api/dynamicInterface';
import { getLocalStorage } from '@/utils/commonMethods';

export default {
  name: 'LayoutContainer',
  components: {
    Carousel,
    HeaderContent
  },
  data() {
    return {
      checkImg: {},
      imgList: [],
      loading: false,
      getImgLength: 0,
      setTimeStart: false
    };
  },
  computed: {
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  watch: {
    checkImg(a) {
      this.$refs.container.style.setProperty(
        '--checkImgUrl',
        `url(${a.imgUrl})`
      );
    },
    // 等全部图片获取到后再开始轮播
    getImgLength(value) {
      value === this.imgList.length && value && (this.setTimeStart = true);
    }
  },
  async created() {
    // this.loading = true;
    // await this.getDataList();
    await this.getFileList();
    // await this.getImgUrlList();
    // await this.getFileList();
    // await this.getFileFindThumbnail();
    // const w = this.$refs.container_menu.clientWidth + 50;
    // this.$refs.ladder_box.style.setProperty('--ladderWidth', `${w}px`);
    // this.loading = false;
  },
  methods: {
    dblclickItem(item) {
      this.gotoRouter(this.menuList[0], item);
    },
    gotoRouter(a, checkImg) {
      if (a.thirdWebsite !== '' && a.thirdWebsite) {
        // /jyzmx/kgely
        const src = a.thirdWebsite;
        window.open(src);
      } else {
        if (!a.meta) {
          a.meta = {};
          a.meta.title = a.name;
        }
        if (!a.redirect) {
          if (!a.type) {
            this.getKeyByMenuId(a, checkImg);
          } else {
            this.yewuMenu(a, checkImg);
          }
        } else {
          const arr = this.getChildren(a.children);
          const obj = arr.find(item => item.path === a.redirect);
          this.gotoRouter(obj, checkImg);
        }
      }
    },
    getChildren(arr, newArr = []) {
      for (const item of arr) {
        newArr.push(item);
        if (item.children) {
          this.getChildren(item.children, newArr);
        }
      }
      return newArr;
    },
    getKeyByMenuId(a, checkImg) {
      getKeyByMenuId({
        menuId: a.id
      }).then(res => {
        if (res.success) {
          const {
            enterpriseCode,
            enterpriseName,
            annexId,
            proEnterpriseCode
          } = checkImg;
          const params = {
            path: a.path,
            query: {
              name: a.name,
              title: a.meta.title,
              sId: res.data.sId.split('-')[0],
              key: res.data.key,
              defId: res.data.id,
              bizKey: '',
              flag: 0,
              fileType: res.data.fileType,
              menuId: a.id,
              formGuid: '',
              taskId: '',
              ENTERPRISECODE: enterpriseCode,
              ENTERPRISENAME: enterpriseName,
              FILEID: annexId,
              isHideLeft: a.isHideLeft,
              isHideTop: a.isHideTop,
              CENTERPRISECODE1: proEnterpriseCode
              // isShow: true
            }
          };
          if (a.isTargetNew + '' === '0') {
            this.$router.push(params);
          } else {
            const routeUrl = this.$router.resolve(params);
            const tempwindow = window.open('_blank'); // 先打开页面
            tempwindow.location = routeUrl.href; // 后更改页面地址
          }
        } else {
          this.$message({
            message: '该菜单存在问题，请联系运维人员',
            type: 'warning'
          });
        }
      });
    },
    yewuMenu(a, checkImg) {
      const {
        enterpriseCode,
        enterpriseName,
        annexId,
        proEnterpriseCode
      } = checkImg;
      const params = {
        path: a.path,
        query: {
          title: a.meta.title,
          menuId: a.id,
          flag: 0,
          // isShow: isShow,
          sId: 'TabsTable',
          ENTERPRISECODE: enterpriseCode,
          ENTERPRISENAME: enterpriseName,
          FILEID: annexId,
          isHideLeft: a.isHideLeft,
          isHideTop: a.isHideTop,
          CENTERPRISECODE1: proEnterpriseCode
        }
      };
      // 不打开新页面
      if (a.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    },
    // async getDataList() {
    //   await getQueryBodyByProduce({ 'tableId': 391, 'pageIndex': 0, 'pageSize': 100, 'pageType': 1 }).then(res => {
    //     const { success, data, message } = res;
    //     if (success && data.length) {
    //       const role = getLocalStorage('xcRoleId');
    //       if (['458', '459'].includes(role)) {
    //         this.imgList = data;
    //       } else {
    //         const enterpriseList = JSON.parse(getLocalStorage('enterpriseList'));
    //         const dataDeal = [];
    //         enterpriseList.length && enterpriseList.forEach(item => {
    //           const dataFind = data.find(v => v.ENTERPRISENAME === item.name);
    //           dataDeal.push(dataFind);
    //         });
    //         this.imgList = dataDeal;
    //       }
    //     } else {
    //       this.$message.error(message);
    //       this.imgList = [];
    //     }
    //   });
    // },
    async getFileList() {
      findHomePageImages({
        appId: getLocalStorage('appId'),
        optionId: getLocalStorage('pcUrl')
      }).then(res => {
        const { success, data, message } = res;
        if (success && data.length) {
          // const role = getLocalStorage('xcRoleId');
          // if (['458', '459'].includes(role)) {
          //   this.imgList = data;
          //   this.getImgUrlList();
          // } else {
          //   const enterpriseList = JSON.parse(
          //     getLocalStorage('enterpriseList')
          //   );
          //   const dataDeal = [];
          //   enterpriseList.length &&
          //     enterpriseList.forEach(item => {
          //       const dataFind = data.find(v => v.enterpriseName === item.name);
          //       if (dataFind) {
          //         dataDeal.push(dataFind);
          //         setLocalStorage('enterpriseName', dataFind.enterpriseName);
          //         setLocalStorage('enterpriseCode', dataFind.enterpriseCode);
          //       }
          //     });
          const unitList = JSON.parse(getLocalStorage('userUnitList'));
          const list = [];
          data.forEach(item => {
            unitList && unitList.length && unitList.forEach(v => {
              v.enterpriseCode === item.enterpriseCode && list.push(item);
            });
          });
          this.imgList = list;
          this.getImgUrlList();
          // }
        } else {
          this.$message.error(message);
          this.imgList = [];
          // this.getImgUrlList();
        }
      });
    },
    getImgUrlList() {
      console.log(this.imgList);
      this.imgList.forEach((item, index) => {
        item.id = item.annexId;
        item.saveName = item.enterpriseName;
        downFile(item, 'pic').then(res => {
          this.getImgLength++;
          res = 'data:image/jpeg;base64,' + res.split(',')[1];
          const obj = {
            ...item,
            ENTERPRISENAME: item.enterpriseName,
            imgUrl: res
          };
          this.imgList.splice(index, 1, obj);
        });
      });
    },

    scrollImgStop() {
      this.$refs.carousel.scrollImgStop();
    },
    scrollImg() {
      this.$refs.carousel.scrollImg();
    }
    // getFileFindThumbnail() {
    //   return new Promise((resolve, reject) => {
    //     const fileIdList = [];
    //     this.imgList.forEach(item => {
    //       fileIdList.push(item.FILEID);
    //     });
    //     fileFindThumbnail({ fileIdList }).then(res => {
    //       const { data, success } = res;
    //       if (success) {
    //         this.imgList.forEach((item, index) => {
    //           for (let i = 0; i < data.length; i++) {
    //             if (data[i].id === item.FILEID) {
    //               const obj = {
    //                 ...item,
    //                 imgUrl: 'data:image/png;base64,' + data[i].content
    //               };
    //               this.$set(this.imgList, index, obj);
    //               break;
    //             }
    //           }
    //         });
    //       }
    //       resolve(res);
    //     });
    //   });
    // }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.container {
  position: relative;
  width: px2vw(1913px);
  // height: px2vw(1080px);
  height: 100%;
  .carousel {
    height: calc(100% - 150px);
  }
  .container_bottom {
    position: relative;
    height: 82px;
    padding-top: 6px;
    // height: px2vw(186px);
    display: flex;
    align-items: center;
    flex-flow: column;
    .container_menu {
      // padding-top: px2vw(50px);
      display: flex;
      justify-content: space-around;
      .container_menu_item {
        margin: 0 px2vw(13px);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: px2vw(28px);
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        color: #ffffff;
        width: px2vw(160px);
        height: px2vw(80px);
        background: linear-gradient(180deg, #1890ff, rgba(24, 144, 255, 0.8));
        border-radius: 10px;
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03),
          0px 9px 28px 0px rgba(0, 0, 0, 0.05),
          0px 6px 16px -8px rgba(0, 0, 0, 0.08);
      }
    }
  }
  // .container_bottom_ladder{
  //   bottom: px2vw(-10px);
  //   position: absolute;
  //   display: flex;
  //   width: 100%;
  //   justify-content: center;
  //   z-index: -1;
  //   height: px2vw(94px);
  //   overflow: hidden;
  //   .container_bottom_ladder_box{
  //     height: px2vw(94px);
  //     width: var(--ladderWidth);
  //     &::after {
  //       width: var(--ladderWidth);
  //       content: "";
  //       background-image: url(~@/assets/img/container/bt.png);
  //       opacity: 0.5;
  //       background-size: 100% 100%;
  //       top: 0;
  //       left: 50%;
  //       bottom: 0;
  //       right: 0;
  //       position: absolute;
  //       transform: translateX(-50%);
  //     }
  //   }
  // }
}
.container::before {
  background-color: #ccc;
  content: "";
  width: px2vw(1913px);
  height: 100%;
  // height: px2vw(1080px);
  position: absolute;
  z-index: -1;
  background-size: 100% 100%;
  background-image: var(--checkImgUrl);
  filter: blur(25px);
}
</style>
